<template>
	<view>
		<u-navbar title=" " :background="background"></u-navbar>
		<view class="page flex-col items-center">
			
			<view class="main">
				<view class="main-title">
					验证码登录
				</view>
				<view class="main-input-list">
					<view class="main-input flex-row items-center">
						<view class="main-input-lf flex-row items-center">
							<image class="input-lf-img" src="/static/login_phone.png" mode=""></image>
							<view class="input-line"></view>
						</view>
						<view class="main-input-rg">
							<input type="text" placeholder="请输入手机号" v-model="mobile"
								placeholder-class="input-placeholder" />
						</view>
					</view>
					<view class="main-input flex-row items-center">
						<view class="main-input-lf flex-row items-center">
							<image class="input-lf-img1" src="/static/login_message.png" mode=""></image>
							<view class="input-line"></view>
						</view>
						<view class="main-input-rg flex-row">
							<input type="text" placeholder="请输入短信验证码" v-model="smsCode"
								placeholder-class="input-placeholder" />
							<view class="wrap">
									<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
									@change="codeChange"></u-verification-code>
									<text class="get-code-text" @tap="getCode">{{tips}}</text>
								</view>
						</view>
					</view>
				</view>
				<view class="login-button" @click="login">
					立即登录
				</view>
				<view class="agreement flex-row items-center justify-center">
					<image v-if="checked" @click="changeCheck" class="agreement-img"
						src="/static/login_agreement_checked.png" mode=""></image>
					<image v-if="!checked" @click="changeCheck" class="agreement-img"
						src="/static/login_agreement_uncheck.png" mode=""></image>

					<view class="agreement-text">
						我已阅读并同意<text class="blue-text">中语未来服务协议</text>和<text class="blue-text">隐私政策</text>
					</view>
				</view>
				<view class="bottom">
					<view class="bottom-top flex-row items-center">
						<view class="bottom-line"></view>
						<view class="bottom-title">
							其他登录方式
						</view>
						<view class="bottom-line"></view>
					</view>
					<view class="bottom-login-meth flex-row justify-center">
						<image @click="loginPhone" class="bottom-img" src="/static/login_mobile.png" mode=""></image>
						<image class="bottom-img" src="/static/login_wechat.png" mode=""></image>
						<image class="bottom-img" src="/static/login_iphone.png" mode=""></image>
						<image class="bottom-img" src="/static/login_youke.png" mode=""></image>
					</view>
				</view>
			</view>
			

		</view>

	</view>
</template>

<script>
	import {
		sendSms,mobileLogin
	} from '@/api/user.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				checked: false,
				tips: '获取验证码',
				// refCode: null,
				seconds: 60,
				mobile: '',//手机号
				smsCode: '123456',//短信验证码
			}
		},
		methods: {
			onLogin(){
				console.log('点击了')
				uni.navigateTo({
					url: '/pages/login/oneLogin/index'
				})
			},
			sendMessage(){
				sendSms({
					mobile: this.mobile,
					smsmode: 0
				}).then(res => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}).catch(err => {
					console.log(2222, err)
					
				})
			},
			loginPhone() {
				uni.preLogin({
					provider: 'univerify',
					success(res) { //预登录成功
						// 显示一键登录选项
						console.log(res);
						console.log('999',2222);
						console.log('预登录成功');
						uni.login({
							provider: 'univerify',
							univerifyStyle: { // 自定义登录框样式
								//参考`univerifyStyle 数据结构`
			                    "fullScreen": false, // 是否全屏显示，默认值： false
								"title": '快速登录',
								"backgroundColor": "#fff", // 授权页面背景颜色，默认值：#ffffff
								"backgroundImage": "/static/login_top_bg.jpg",
								"icon": {
									"path": "../../static/my/头像.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
								},
								"phoneNum": {
									"color": "#1C335C", // 手机号文字颜色 默认值：#000000
									"fontSize": "37", // 手机号字体大小 默认值：18
									"marginBottom": "20"
								},
								"slogan": {
									"color": "#2e9027", //  slogan 字体颜色 默认值：#8a8b90
									"fontSize": "12" // slogan 字体大小 默认值：12
									
								},
			                    // 一键登录
								"authButton": {
									"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
									"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
									"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
									"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
									"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
								},
			                    // 其他登录方式
								"otherLoginButton": {
									"visible": "false", // 是否显示其他登录按钮，默认值：true
									"normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
									"highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
									"textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
									"title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
									"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
									"borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
								},
			                    // 自定义按钮登录方式
			                    "buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
									"iconWidth": "45px",        // 图标宽度（高度等比例缩放） 默认值：45px  
									"list": [{  
										    "provider": "apple",
										    "iconPath": "/static/test.jpg",  // 图标路径仅支持本地图片  
									    },  
										{  
											"provider": "weixin",
											"iconPath": "/static/test.jpg",  
										}  
									]  
								},
								"privacyTerms": {
									"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
									"textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
									"termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
									"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
									"suffix": "", // 条款后的文案 默认值：“并使用本机号码登录”
									"fontSize": "12", // 字体大小 默认值：12,
									"privacyItems": [
										// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
										{
											"url": "https://", // 点击跳转的协议详情页面
											"title": "用户服务协议" // 协议名称
										},
										{
											"url": "https://", // 点击跳转的协议详情页面
											"title": "隐私政策" // 协议名称
										}
									]
								}
							},
							success(res) { // 登录成功
								console.log(res);
								this.openid = res.authResult.openid;
								this.access_token = res.authResult.access_token;
			 
								console.log(this.openid);
								console.log("access_token",this.access_token);
			 
			 
			 
							// 客户端(调用云函数)  调用云函数来实现整个业务逻辑
							// 在得到access_token后，通过callfunction调用云函数
							uniCloud.callFunction({
								name:"one-phone-login",
								data:{
									'openid': this.openid,
									'access_token': this.access_token
								}
							}).then(res=>{
								console.log("获取成功");
								console.log(res); // res 内容则包含手机号码
								// 获取用户的手机号
								this.phoneNumber=res.result.data.phoneNumber;
								console.log(this.phoneNumber,'手机号');
								console.log(res);
								uni.closeAuthView() //成功关闭授权页面
								// return utils.request(
								// 	"/api/api.php?action=phonelogin", //接口
								// 	"POST",
								//  	{
								//  		'参数'
								//  	},
								// 	false, true, true)
								//  	.then(res => {
								//  		uni.closeAuthView() //成功关闭授权页面
								//  		console.log('登录成功', res)
								//  		console.log(res.code);
								//  		if (res.code == 1){
								// 			setTimeout(() => {
								//  				uni.redirectTo({
								//  					url: '/pages/index/index'
								//  				})
								//  			}, 500)
								// 		}
								//  	})
			 
							}).catch((err)=>{
								// 执行失败
							})
							},
			                // 当用户点击自定义按钮时，会触发uni.login的fail回调[点击其他登录方式，可以跳转页面]
							// 判断返回数据执行任意逻辑
							fail(res){  // 登录失败
							uni.closeAuthView() //成功关闭授权页面
								console.log(res.errCode)
								console.log(res.errMsg)
			                    if (res.code == "30002") {
									console.log('密码登录');
								}else if(res.code == "30008"){
									console.log('自定义按钮登录方式');
								}
							}
						})
					},
					fail(res) { // 预登录失败
						// 不显示一键登录选项（或置灰）
						// 根据错误信息判断失败原因，如有需要可将错误提交给统计服务器
						console.log('失败',2222);
						console.log(res.errCode)
						console.log(res.errMsg)
					}
				})
			},
			login(){
				if(this.mobile == ''){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				if(this.smsCode == ''){
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					})
					return
				}
				if(!this.checked){
					uni.showToast({
						title: '请先同意已阅读协议与隐私政策',
						icon: 'none'
					})
					return
				}
				mobileLogin({
					mobile: this.mobile,
					captcha: this.smsCode
				}).then(res => {
					console.log(res, '成功')
					uni.setStorageSync("token",res.result.token)
					uni.switchTab({
						url:'/pages/index/index'
					})
				}).catch(err => {
					console.log(2222, err)
					
				})
			},
			changeCheck() {
				this.checked = !this.checked
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.sendMessage()
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
	@import url('../../common/css/common.css');

	page {
		/* background-color: #f5f8ff; */
		
		width: 100%;
		height: 100%;
		background-image: url("../../static/login_top_bg.jpg");
		background-size: 100% 1326rpx;
		background-repeat: no-repeat;
	}

	.icon {
		width: 210rpx;
		height: 210rpx;
		background-color: #fdfeff;
		border-radius: 50%;
		margin-top: 35rpx;
	}

	/* .icon-img {
		width: 210rpx;
		height: 210rpx;
	} */
	.main {
		width: 100%;
		margin-top: 427rpx;
		background-color: #fff;
		padding-top: 40rpx;
		padding-bottom: 80rpx;
		border-radius: 36rpx 36rpx 0 0;
		padding-left: 45rpx;
		padding-right: 35rpx;
		height: calc(100vh - 427rpx);
	}

	.main-title {
		font-weight: 600;
		font-size: 52rpx;
		color: #2B3D7B;
		margin-bottom: 68rpx;
		
	}

	.main-input {
		width: 671rpx;
		height: 109rpx;
		border-radius: 54rpx;
		background: #ffffff;
		margin-bottom: 32rpx;
		border: 1rpx solid #EEEEEE;
	}

	.main-input-lf {
		padding-left: 39rpx;

		/* border-right:; */
	}

	.input-line {
		width: 2rpx;
		height: 48rpx;
		opacity: 0.21;
		background: #616274;
		margin-left: 47rpx;
		margin-right: 39rpx;
	}

	.input-lf-img {
		width: 29rpx;
		height: 35rpx;
	}
	.input-lf-img1 {
		width: 33rpx;
		height: 30rpx;
	}

	.input-placeholder {
		font-weight: 400;
		opacity: 0.55;
		font-size: 26rpx;
		color: #616274;
	}

	.login-button {
		width: 673rpx;
		height: 111rpx;
		line-height: 111rpx;
		border-radius: 54rpx;
		background: linear-gradient(-90deg, #bfbdff, #b8e2ff);
		font-weight: 500;
		font-size: 28rpx;
		text-align: center;
		color: #1C335C;
		margin: 0 auto;
		margin-top: 49rpx;
		margin-bottom: 65rpx;

	}

	.agreement {
		margin: 0 auto;
	}

	.agreement-img {
		width: 26rpx;
		height: 26rpx;
	}

	.agreement-text {
		font-weight: 400;
		font-family: PingFang SC;
		font-size: 24rpx;
		margin-left: 8rpx;
	}

	.blue-text {
		color: #066fff;
		font-weight: 400;
		font-family: PingFang SC;
		font-size: 24rpx;
	}

	.bottom {
		margin-top: 147rpx;
	}

	.bottom-line {
		width: 231rpx;
		height: 1rpx;
		opacity: 0.22;
		background: #939fc1;
	}

	.bottom-title {
		font-weight: 400;
		opacity: 0.55;
		font-size: 24rpx;
		color: #616274;
		padding-left: 29rpx;
		padding-right: 28rpx;
	}

	.bottom-img {
		width: 64rpx;
		height: 64rpx;
		margin-right: 23rpx;
	}

	.bottom-login-meth {
		margin-top: 59rpx;
	}
	.get-code-text {
		font-weight: 400;
		font-size: 24rpx;
		color: #1C335C;
	}
</style>